<template>
    <div id="nav"> 
        <router-link to="/home">
            <div><i class="iconfont icon-dianying"></i></div>
            <div>电影/影院</div>
        </router-link>

        <router-link to="/video">
            <div><i class="iconfont icon-shipintiaodu"></i></div>
            <div>视频</div>
        </router-link>
        
        <router-link to="/minivideo">
            <div><i class="iconfont icon-w_shipin"></i></div>
            <div>小视频</div>
        </router-link>

        <router-link to="/show">
            <div><i class="iconfont icon-dianyingyanchu"></i></div>
            <div>演出</div>
        </router-link>

        <router-link to="/me">
            <div><i class="iconfont icon-wode"></i></div>
            <div>我的</div>
        </router-link>
    </div>
</template>

<script>
export default {
    name: 'Footer',

    data() {
        return {
            
        };
    },

    methods: {
        
    },
    components:{},
};
</script>

<style  scoped>
    #nav {
        width: 100%;
        height: 45px;
        line-height: 20px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        padding-top:5px;
        text-align: center;
        border-top: 1px solid #ccc;
        background: #fff;
    }
    #nav .iconfont {
        font-size: 20px;
    }
    #nav a {
         color: #696969;
    }
    /* 激活状态链接样式 */
    /* router-link-exact-active  路径的完全匹配的样式 */
    /* router-link-active 路径可以部分匹配 */
    #nav a.router-link-active {
        color: #f03d37;
    }
    /* a:nth-of-type(1) div:nth-of-type(1) {
    
        margin-top: -0.053333rem;
    } */
   
        
</style>